<template>
  <div class="detail">
    <div class="swiper-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="photo in mainPhoto"
          :key="photo.id"
        >
          <img :src="photo.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-divider>商品图文详情</van-divider>

    <div class="detail-content">
      <img v-for="item in detailImgs"
      :key="item.image.id"
      v-lazy="item.image.url">
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="total" @click="jumpToCart" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCartHandler"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'
export default {
  name: 'Detail',
  data () {
    return {
      mainPhoto: [],
      detailImgs: [],
      detail: []
    }
  },
  computed: {
    total () {
      return this.$store.getters.totalCount
    }
  },
  created () {
    getDetail(this.$route.params.id).then(res => {
      console.log('detail:', this)
      console.log(this.$route.params.id)
      this.mainPhoto = res.photo
      this.detailImgs = res.descContentList
      this.detail = res
    })
  },
  methods: {
    jumpToCart () {
      this.$router.push('/cart')
    },
    // 加入购物车
    addToCartHandler () {
      console.log(this)
      console.log(this.detail)
      const { id, title, thumbnail, price } = this.detail
      // 构建当前选购商品的信息
      const payload = {
        id,
        title,
        img: thumbnail,
        amount: 1,
        price
      }
      // 调用 store.commit()提交 mutation
      // 不能直接调用mutation (.addToCart)
      // commit('mutation方法名'，额外参数)
      this.$store.commit('addToCart', payload)
      console.log(this.$store)
    }
  }
}
</script>

<style lang="scss" scoped>
//  .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
//   }
  .detail {
    .swiper-container{
      width:100%;
      height:0;
      padding-top:100%;
      position: relative;
      .my-swipe{
        position:absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
          img {
            width: 100%;
            height: 100%;
          }
      }
    }
    .detail-content img{
      width:100%;
    }
  }
</style>
